<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>快乐购 - 购物车</title>

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/glyphicons-halflings.min.css">
		<link rel="stylesheet" type="text/css" href="css/default.min.css" />

		<!-- JS -->
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.color-2.1.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/cart.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<!-- 导航条开始 -->
		<header class="navbar navbar-expand-md navbar-light bg-light mb-1">
			<nav class="container">
				<a href="index.html" class="navbar-brand">
					<img src="img/logo.png" height="30" alt="Happy Go" />
				</a>
				<a href="#navbar-menu1" data-toggle="collapse" class="navbar-toggler">
					<i class="navbar-toggler-icon"></i>
				</a>
				<div id="navbar-menu1" class="navbar-toggle navbar-collapse collapse collapsed">
					<div class="navbar-text">
						<span>Admin，</span>
						<span>欢迎来到快乐购！&nbsp;</span>
					</div>
					<ul class="nav navbar-nav">
						<li class="nav-item">
							<a href="login.html" class="nav-link">登录</a>
						</li>
						<li class="nav-item">
							<a href="register.html" class="nav-link">注册</a>
						</li>
						<li class="nav-item">
							<a href="login.html" class="nav-link">注销</a>
						</li>
					</ul>

					<ul class="nav navbar-nav ml-auto">
						<li class="nav-item">
							<a href="index.html" class="nav-link">首页</a>
						</li>
						<li class="nav-item">
							<a href="my/index.html" class="nav-link">个人资料</a>
						</li>
						<li class="nav-item">
							<a href="my/order.html" class="nav-link">我的快乐购</a>
						</li>
						<li class="nav-item">
							<a href="cart.html" class="nav-link active">购物车</a>
						</li>
						<li class="nav-item">
							<a href="html/index.html" class="nav-link">后台管理</a>
						</li>
					</ul>
				</div>
			</nav>
		</header>
		<!-- //导航条结束 -->

		<!-- 商品分类&搜索表单部分 -->
		<section class="container">

			<!-- 商品分类部分 -->
			<ul class="breadcrumb w-100 py-1">
				<li class="breadcrumb-item">
					<a href="">全部</a>
				</li>
				<li class="dropdown breadcrumb-item">
					<a href="products.html" class="dropdown-toggle" data-toggle="dropdown">女装/内衣</a>
					<ul class="dropdown-menu">
						<li class="dropdown-item">
							<a href="products.html">全部</a>
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="products.html">毛呢外套</a>
						</li>
						<li class="dropdown-item">
							<a href="products.html">羽绒服</a>
						</li>
						<li class="dropdown-item">
							<a href="products.html">棉服</a>
						</li>
					</ul>
				</li>
				<li class="dropdown breadcrumb-item">
					<a href="" class="dropdown-toggle" data-toggle="dropdown">男装/运动户外</a>
					<ul class="dropdown-menu">
						<li class="dropdown-item">
							<a href="products.html">全部</a>
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="products.html">单西</a>
						</li>
						<li class="dropdown-item">
							<a href="products.html">棉衣</a>
						</li>
					</ul>
				</li>
				<li class="dropdown breadcrumb-item">
					<a href="" class="dropdown-toggle" data-toggle="dropdown">女鞋/男鞋/箱包</a>
					<ul class="dropdown-menu">
						<li class="dropdown-item">
							<a href="products.html">全部</a>
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="products.html">平底单鞋</a>
						</li>
						<li class="dropdown-item">
							<a href="products.html">高跟单鞋</a>
						</li>
					</ul>
				</li>
				<li class="dropdown breadcrumb-item">
					<a href="" class="dropdown-toggle" data-toggle="dropdown">
						<span>手机/数码/电脑办公</span>
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li class="dropdown-item">
							<a href="products.html">全部</a>
						</li>
						<li class="dropdown-divider"></li>
						<li class="dropdown-item">
							<a href="products.html">笔记本</a>
						</li>
						<li class="dropdown-item">
							<a href="products.html">平板电脑</a>
						</li>
						<li class="dropdown-item">
							<a href="products.html">台式机</a>
						</li>
					</ul>
				</li>
			</ul>
			<!-- //商品分类部分结束 -->

			<!-- 搜索表单部分 -->
			<div class="row">
				<div class="col-sm-8 py-1">
					<img src="img/top_center.jpg" class="img-fluid" alt="" />
				</div>
				<div class="col-sm-4 py-1">
					<form action="products.html" method="get">
						<div class="input-group input-group-sm">
							<input type="search" class="form-control" placeholder="输入商品名称..." />
							<div class="input-group-append">
								<button class="btn btn-secondary">
									<i class="glyphicon-search"></i>
									<span class="sr-only">搜索</span>
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			<!-- //搜索表单部分结束 -->
		</section>
		<!-- //商品分类&搜索表单部分 -->

		<!-- 页面主体部分 -->
		<div class="container mt-2">
			<div class="h3 border-bottom">购物车明细</div>
			<!-- 空购物车为空时显示以下注释内容 -->
			<!-- <div class="row">
				<div class="col-md-3 offset-md-2">
					<div class="text-center">
						<img src="img/car_no_goods.jpg" class="img-fluid" />
					</div>
				</div>
				<div class="col-md-5">
					<div class="text-center cart-empty">
						<p class="text-muted">亲，您的购物车空空如也，快去抢购心仪的商品吧~~~</p>
						<a href="index.html" class="btn btn-info">去快乐购</a>
					</div>
				</div>
			</div> -->

			<!-- 购物车列表部分（购物车有数据时显示） -->
			<form id="form-cart" action="my/order-confirm.html">
				<table class="table table-sm table-striped">
					<thead class="thead-dark">
						<tr>
							<th>
								<input data-toggle="check-all" type="checkbox" class="checkbox-inline" />
							</th>
							<th>商品名称</th>
							<th>单价(元)</th>
							<th>数量</th>
							<th>小计金额(元)</th>
							<th>编辑</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td width="30">
								<input id="chk1" data-toggle="check-sub" type="checkbox" class="checkbox-inline" />
								<input type="hidden" value="158.00" />
								<!--记录金额，在JS脚本中用来计算-->
								<input type="hidden" name="pid" value="1" />
								<!--商品编号-->
							</td>
							<td>
								<label for="chk1" class="text-muted">棉衣女中长款韩版2017冬装新款羽绒棉服大毛领修身百搭棉袄外套潮</label>
							</td>
							<td>
								<label for="chk1">158.00</label>
							</td>
							<td>
								<label for="chk1">1</label>
							</td>
							<td>
								<label for="chk1">158.00</label>
							</td>
							<td width="70">
								<button data-toggle="remove" type="button" class="btn btn-sm py-0 btn-outline-danger">
									<i class="glyphicon-remove"></i>
									<span class="d-none d-md-inline">移除</span>
								</button>
							</td>
						</tr>
						<tr>
							<td width="30">
								<input id="chk2" data-toggle="check-sub" type="checkbox" />
								<input type="hidden" value="678.00" />
								<!--记录金额，在JS脚本中用来计算-->
								<input type="hidden" name="pid" value="2" />
								<!--商品编号-->
							</td>
							<td>
								<label for="chk2" class="text-muted">Five Plus新女冬装刺绣双排扣长款长袖毛呢西装外套2HD5345220</label>
							</td>
							<td>
								<label for="chk2">339.00</label>
							</td>
							<td>
								<label for="chk2">2</label>
							</td>
							<td>
								<label for="chk2">678.00</label>
							</td>
							<td width="70">
								<button data-toggle="remove" type="button" class="btn btn-sm py-0 btn-outline-danger">
									<span class="glyphicon-remove"></span>
									<span class="hidden-xs">移除</span>
								</button>
							</td>
						</tr>
						<tr>
							<td width="30">
								<input id="chk3" data-toggle="check-sub" type="checkbox" />
								<input type="hidden" value="6990.00" />
								<!--记录金额，在JS脚本中用来计算-->
								<input type="hidden" name="pid" value="3" />
								<!--商品编号-->
							</td>
							<td>
								<label for="chk3" class="text-muted">王小鸭双面羊绒大衣女中长款2017新款韩版潮长袖秋冬装毛呢外套女</label>
							</td>
							<td>
								<label for="chk3">1,398.00</label>
							</td>
							<td>
								<label for="chk3">5</label>
							</td>
							<td>
								<label for="chk3">6,990.00</label>
							</td>
							<td width="70">
								<button data-toggle="remove" type="button" class="btn btn-sm py-0 btn-outline-danger">
									<span class="glyphicon-remove"></span>
									<span class="hidden-xs">移除</span>
								</button>
							</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="4" align="right">
								<div class="cart-foot-sum text-muted">
									<small>总计金额：</small>
									</h3>
							</td>
							<td colspan="2" align="left">
								<div class="cart-foot-sum text-danger">
									<small>￥</small>
									<span id="sum1">7,826.00</span>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="4" align="right">
								<div class="cart-foot-sum text-muted">
									<small>应付款：</small>
								</div>
							</td>
							<td colspan="2" align="left">
								<div class="cart-foot-sum text-danger">
									<small>￥</small>
									<span id="sum2" class="rounded">0.00</span>
								</div>
							</td>
						</tr>
						<tr>
							<td colspan="6" align="right">
								<!--没有登录时不可以提交订单，显示该链接-->
								<a href="login.html" class="btn btn-lg btn-warning">
									<span class="glyphicon-shopping-cart"></span>
									<span>请登录后再提交订单</span>
								</a>
								<!--已登录时可以提交订单，显示该按钮-->
								<button class="btn btn-lg btn-success" disabled="disabled">
									<span class="glyphicon-shopping-cart"></span>
									<span>提交订单</span>
								</button>
							</td>
						</tr>
					</tfoot>
				</table>
			</form>
			<!-- //购物车列表部分结束 -->
		</div>
		<!-- //页面主体部分结束 -->

		<!-- 页面脚部部分 -->
		<footer class="mt-2">
			<hr />
			<div class="container mb-2">
				<div class="row">
					<div class="col-6 col-md-4 col-lg mb-2 text-center">
						<img src="img/foot_img_tip1.png" class="img-fluid rounded center-block" />
						<div class="text-danger">上市企业</div>
						<div class="small text-muted">股票代码000001</div>
					</div>

					<div class="col-6 col-md-4 col-lg mb-2 text-center">
						<img src="img/foot_img_tip2.png" class="img-fluid rounded center-block" />
						<div class="text-danger">快乐购严选</div>
						<div class="small text-muted">正品行货 品质保证</div>
					</div>

					<div class="col-6 col-md-4 col-lg mb-2 text-center">
						<img src="img/foot_img_tip3.png" class="img-fluid rounded center-block" />
						<div class="text-danger">10天无理由退货</div>
						<div class="small text-muted">为您提供售后无忧保障</div>
					</div>

					<div class="col-6 col-md-4 col-lg mb-2 text-center">
						<img src="img/foot_img_tip4.png" class="img-fluid rounded center-block" />
						<div class="text-danger">满129免邮</div>
						<div class="small text-muted">在线支付 购物包邮</div>
					</div>

					<div class="col-6 col-md-4 col-lg mb-2 text-center">
						<img src="img/foot_img_tip5.png" class="img-fluid rounded center-block" />
						<div class="text-danger">微笑无时无刻</div>
						<div class="small text-muted">365*24小时人工服务</div>
					</div>

					<div class="col-6 col-md-4 col-lg mb-2 text-center">
						<img src="img/foot_img_tip6.png" class="img-fluid rounded center-block" />
						<div class="text-danger">闪电物流</div>
						<div class="small text-muted">闪电发货 次日必达</div>
					</div>
				</div>
			</div>
			<!-- <hr /> -->
			<div class="container">
				<div class="row">

					<div class="col-6 col-sm-3 col-lg mb-2">
						<div class="text-center d-flex flex-column">
							<a href="#">使用帮助</a>
							<a href="#">税费收取规则</a>
							<a href="#">新手指南</a>
							<a href="#">常见问题</a>
							<a href="#">用户协议</a>
						</div>
					</div>

					<div class="col-6 col-sm-3 col-lg mb-2">
						<div class="text-center d-flex flex-column">
							<a href="#">使用帮助</a>
							<a href="#">税费收取规则</a>
							<a href="#">新手指南</a>
							<a href="#">常见问题</a>
							<a href="#">用户协议</a>
						</div>
					</div>

					<div class="col-6 col-sm-3 col-lg mb-2">
						<div class="text-center d-flex flex-column">
							<a href="#">使用帮助</a>
							<a href="#">税费收取规则</a>
							<a href="#">新手指南</a>
							<a href="#">常见问题</a>
							<a href="#">用户协议</a>
						</div>
					</div>

					<div class="col-6 col-sm-3 col-lg mb-2">
						<div class="text-center d-flex flex-column">
							<a href="#">使用帮助</a>
							<a href="#">税费收取规则</a>
							<a href="#">新手指南</a>
							<a href="#">常见问题</a>
							<a href="#">用户协议</a>
						</div>
					</div>

					<div class="w-100 d-sm-none"></div>

					<div class="col-6 col-sm-3 col-lg mb-2">
						<div class="text-center d-flex flex-column px-4">
							<div>手机快乐购</div>
							<img src="img/footer_ewm_01.png" alt="" class="img-fluid">
							<div>下载移动客户端</div>
						</div>
					</div>

					<div class="col-6 col-sm-3 col-lg mb-2">
						<div class="text-center d-flex flex-column px-4">
							<div>快乐微信购</div>
							<img src="img/footer_ewm_02.png" alt="" class="img-fluid">
							<div>快乐购官方微信</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-sm my-2 d-flex justify-content-sm-end justify-content-center">
						<img src="img/foot_img3.png" class="img-fluid rounded center-block" alt="">
					</div>
					<div class="col-sm my-2 d-flex justify-content-sm-start justify-content-center">
						<img src="img/foot_img4.png" class="img-fluid rounded center-block" alt="">
					</div>
				</div>

				<div class="row">
					<div class="col text-center small text-muted">
						<div>Rights Reserved 免费服务热线: 400-800-0001 | 固话也可拨打: 800-000-0001 E-Mail: service@happygo.com</div>
						<div>湘ICP备10000001号 信息网络传播视听节目许可证号：1000001</div>
					</div>
				</div>
			</div>
		</footer>
		<!-- //页面脚部部分结束 -->
	</body>

</html>
